<template>
  <el-menu router :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <el-menu-item>
      <img style="width: 100%; min-width: 52.2px; height: 90%;" src="../assets/images/logo_censor.png"
        alt="Censor logo" />
      <i style="font-family: 'Ali VF Regular'; font-weight: bolder; font-size: 27px; color: black;">百稿审</i>
    </el-menu-item>
    <el-input placeholder="请输入搜索内容……" :prefix-icon="Search">
      <template #append>
        <el-button type="primary" @click="subSearch" round><strong>搜索一下</strong></el-button>
      </template>
    </el-input>
    <el-menu-item :index="data.isLogin ? '/user' : '/login'">
      <el-avatar :size="36" fit="cover">
        <img id="user_avatar" src="../assets/images/touxiang.jpg" v-if="data.isLogin" :key="1" />
        <i v-else-if="!data.isLogin" :key="0">登录</i>
      </el-avatar>
      <i v-show="data.isLogin">&nbsp;&nbsp;{{ username }}</i>
    </el-menu-item>
    <el-menu-item index="/register" v-show="!data.isLogin">
      <el-button type="success" round><strong><el-icon>
            <UserFilled />
          </el-icon>注册</strong></el-button>
    </el-menu-item>
    <!-- <el-menu-item index="/upload">
      <el-button type="primary" round style="width: auto;"><strong><el-icon>
            <UploadFilled />
          </el-icon>上传文件（Beta）</strong></el-button>
    </el-menu-item> -->
    <!-- 
    <el-menu-item index="/">注销
    </el-menu-item> -->
    <el-sub-menu>
      <template #title>更多</template>
      <el-menu-item index="01">操作手册</el-menu-item>
      <el-menu-item index="02">安全中心</el-menu-item>
      <el-menu-item index="03">在线客服</el-menu-item>
      <el-menu-item index="04" @click="logout">退出登录</el-menu-item>

    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { More, Search, UserFilled } from '@element-plus/icons-vue'
import { fa, tr } from 'element-plus/es/locale';


const activeIndex = ref('1')
const data = reactive({
  isLogin: false
})
const username = ref('天地并况')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const subSearch = () => {
  console.log("you clicked search button!")
}
const logout = () => {
  console.log("测试退出登录");
  // do something
  data.isLogin = false
  // location.reload();
}
</script>

<style scoped>
/* .flex-grow {
  flex-grow: 1;
} */

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "Ali VF Regular";
  src: url("//at.alicdn.com/wf/webfont/RY1kv39exwtU/zoaYYzxOZLwh.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/RY1kv39exwtU/AbbYz03XAxCl.woff") format("woff");
  font-display: swap;
}


.el-menu--horizontal {
  background: linear-gradient(90deg, #80d4f9, #a6defa, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);
  background: linear-gradient(45deg, #35bef7, #5bc9f8, #80d4f9, #a6defa, #a6defa, #c7e9fb, #80d4f9);
  /* background: linear-gradient(135deg, #a1c4fd, #c2e9fb #c2e9fb,#a1c4fd); */
  /* border-radius: 0 0 10px 10px; */
  /* background: linear-gradient(135deg, #ffbe0c, #ffda0c, #fff70c, #c2ff0c, #7aff0c);  */
  /* background: url(../assets/images/2023-12-05_152345.jpg) top center no-repeat; */
  background-size: cover;
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .22), 0 0 5px 2px rgba(0, 0, 0, .24);
  width: 100%;
  min-width: 1024px;
  border-radius: 0 0 20px 20px;
  border: none;
  --el-menu-hover-bg-color: none
}


.el-header {
  width: 100%;
  height: 66px;
}



.el-input {
  max-width: 470px;
  margin: auto;
}

.el-button {
  margin: auto;
}
</style>
